<template>
  <view class="pageShow">
    <view class="list-group" v-for="(group, gindex) in listData" :key="gindex">
      <view
        class="list-items"
        v-for="(item, index) in group"
        :key="index"
        @click="tapItem(item)"
      >
        <view
          class="items-body"
          :class="[group.length == index + 1 ? '' : 'border-b']"
        >
          <view class="">
            <text class="" :style="{ color: item.color || '' }">{{
              item.txt
            }}</text>
          </view>
          <view class="list-arrow-right" style="display: flex; flex: auto">
            <text
              style="
                flex: auto;
                font-size: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                text-align: right;
                color: gray;
              "
              >{{ item.rightValue || "" }}</text
            >
            <u-icon
              :name="item.rightIcon ? item.rightIcon : 'arrow-right'"
              :color="item.color"
            ></u-icon>
            <!-- <text class="icons icon-arrow-right"></text> -->
          </view>
        </view>
      </view>
    </view>

    <u-modal
      :show="logOutShow"
      :showCancelButton="true"
      title="是否退出登录？"
      confirmColor="red"
      @confirm="logOut"
      @cancel="logOutShow = false"
    ></u-modal>
  </view>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useStore } from "vuex";
const store = useStore();
const logOutShow = ref(false);


const itemList = [
  {
    name: "中文简体",
    value: "zh",
  },
  {
    name: "英文",
    value: "en",
  },
];

const listData = reactive([
  [
    {
      path: "",
      txt: "切换部门",
      // switchDepartments
      rightValue: store.getters.currdeptInfo?.deptName || "",
      func: () => {
        uni.navigateTo({
          url: "./switchDepartments/index",
        });
      },
    },
    {
      path: "",
      txt: "切换角色",
      // switchDepartments
      rightValue: store.getters.roleInfo?.name || "",
      func: () => {
        uni.navigateTo({
          url: "./switchRole/index",
        });
      },
    },
  ],
  // [
  //   {
  //     path: "/pages/subSetting/shippingAddrManage/index",
  //     txt: "收获地址管理",
  //   },
  // ],
  [
    {
      path: "/pages/subHome/public/webView?type=service-agreement&url=/service-agreement",
      txt: "服务协议",
    },
    {
      path: "/pages/subHome/public/webView?type=privacy-policy&url=/privacy-polic",
      txt: "隐私政策条款",
    },
    {
      path: "./fontSetting/fontSetting",
      txt: "字体大小",
    },
    // {
    //   path: "",
    //   txt: "系统语言",
    //   rightValue: itemList.find(v => v.value === this.$store.getters.lang).name,
    //   func: async (item) => {
    //     const sheetRes = await this.$refs.kingonActionSheet.show({
    //       title: "选择语言",
    //       itemList: itemList.map(v => v.name),
    //     });
    //     this.$store.commit('setLang', itemList[sheetRes].value);
    //     item.rightValue = itemList[sheetRes].name;
    //     // uni.setStorageSync('lang', itemList[sheetRes].value);
    //   }
    // },
    {
      path: "",
      txt: "注销账号",
      func: () => {
        uni.showToast({
          title: "暂不支持",
          duration: 2000,
          icon: "none",
        });
      },
    },
  ],
  [
    {
      path: "",
      txt: "退出登录",
      color: "red",
      func: () => {
        logOutShow.value = true;
      },
      rightIcon: "arrow-rightward",
    },
  ],
]);

onMounted(() => {
  // listData.push(
  //   ...
  // );
  // #ifdef APP-PLUS
  listData.push([
    {
      path: "",
      txt: `版本更新 (${config.VERSION})`,
    },
  ]);
  // #endif
});

/** 退出登录 */
const logOut = () => {
  store.dispatch("user/logout", { isReLaunch: true });
};

/** 列表项点击 */
const tapItem = (item) => {
  if (item.func) {
    item.func(item);
  } else {
    uni.navigateTo({ url: item.path });
  }
};
</script>

<style lang="scss" scoped>
.pageShow {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 10px;
}

.list-items {
  background-color: #ffffff;
  .border-b {
    border-bottom: #efefef 1px solid;
  }
}

.items-body {
  padding: 25rpx;
  display: flex;
  flex-direction: row;
}

.list-group {
  margin: 20rpx 10px;
  border-radius: 10px;
  overflow: hidden;
}
</style>
